<template>
	<view class="u-rela">
		<scroll-view class="property-wrap" scroll-x>
			<view class="grid">
				<image :src="item ? item : 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img8.png'" v-for="(item,index) in data.images" :key="index"></image>
			</view>
		</scroll-view>
		<!-- 定位图标 -->
		<view class="icon-location">
			<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/icon-location.png" mode="widthFix"></image>
		</view>
		<view class="wrap">
			<view class="u-font-34 blod">工作原理</view>
			<view class="desc">
				{{data.content}}
			</view>
			<view class="propty">
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/icon-sf-1.png" mode="widthFix"></image>
				<text class="name">作业地点</text>
				<text class="value">{{data.address}}</text>
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/icon-sf-2.png" mode="widthFix"></image>
				<text class="name">作业时间</text>
				<text class="value">{{data.date_time}}</text>
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/icon-sf-3.png" mode="widthFix"></image>
				<text class="name">负责人</text>
				<text class="value">{{data.user_name}}</text>
			</view>
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar active-color="#07C160" v-model="current" :list="list" :mid-button="false" @change="tabbarChange">
		</u-tabbar>
	</view>
</template>

<script>
	import customHeader from '@/components/customHeader.vue'
	export default {
		components: {
			customHeader
		},
		data() {
			return {
				tabIndex: 0,
				current: 2,
				list: [{
						iconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-1.png',
						selectedIconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-1a.png',
						text: '产品信息',
						customIcon: false,
						url: '/pages/agricTrace/agricInfo/agricInfo'
					},
					{
						text: '生长环境',
						iconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-2.png',
						selectedIconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-2a.png',
						customIcon: false,
						url: '/pages/agricTrace/growEnv/growEnv'
					},
					{
						text: '生长日记',
						iconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-3.png',
						selectedIconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-3a.png',
						customIcon: false,
						url: '/pages/agricTrace/growDiary/growDiary'
					},
					{
						text: '权威监管',
						iconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-4.png',
						selectedIconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-4a.png',
						customIcon: false,
						url: '/pages/agricTrace/authority/authority'
					}
				],
				id:'',
				code:'',
				data:{}
			}
		},
		onLoad(option) {
			if(option){
				this.id = option.id;
				this.trace_grow_process_detail(this.id)
			}
		},
		methods: {
			tabbarChange(index) {
				console.log(index)
				uni.navigateTo({
					url: this.list[index].url
				})
			},
			handleChange(index) {
				this.tabIndex = index
			},
			
			// 获取日记详情
			trace_grow_process_detail(id){
				this.$http_1({
					url:this.api_1.trace_grow_process_detail,
					method: 'get',
					data:{
						id
					}
				}).then(res => {
					// console.log(res,'日记详情');
					if(res.code == 1){
						this.data = res.data
					}
				})
			}
		},
		onReady() {

		}
	}
</script>

<style scoped lang="scss">
	.header-bg {
		position: relative;
		width: 750rpx;
		height: 750rpx;
		z-index: 1;
	}

	.wrap {
		position: relative;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		padding: 20rpx 40rpx;
		overflow: hidden;
		z-index: 9;

	}

	.desc {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		text-indent: 2em;
	}

	.propty{
		margin-top: 70rpx;
		padding-bottom: 30rpx;
		display: grid;
		grid-template-columns: 42rpx 150rpx auto;
		gap:40rpx 30rpx;
		image{
			width: 42rpx;
			height: 42rpx;
		}
		.name{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
		.value{
			justify-self: end;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}

	.property-wrap {
		white-space: nowrap;
		width: 750rpx;
		padding: 40rpx;

		.grid {
			width: 1500rpx;
			display: flex;
			flex-wrap: nowrap;

			image {
				margin-right: 30rpx;
				width: 670rpx;
				height: 750rpx;
				border-radius: 20rpx;
			}
		}
	}

	.icon-location {
		position: absolute;
		top: 750rpx;
		right: 70rpx;
		width: 80rpx;
		height: 80rpx;
		background: #FFFFFF;
		box-shadow: 0px 10rpx 20rpx 0px rgba(0, 99, 66, 0.1);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 44rpx;
			height: 44rpx;
		}
	}
</style>
<style>
	page {
		padding: 0;
		background: #fff;
	}
</style>
